const info = {
    title: '手机',
    price: '100.00',
    size: ['iPhone12', 'iPhone12 pro', '...'],
    colord: ['银色', '金色', '黑色'],
    children: [{
        id: 1,
        img: './img/15.png',
        small_img: './img/15.png',
        big_img: './img/15.png'
      },
      {
        id: 2,
        img: './img/16.png',
        small_img: './img/16.png',
        big_img: './img/16.png'
      },
      {
        id: 3,
        img: './img/17.png',
        small_img: './img/17.png',
        big_img: './img/17.png'
      },
      {
        id: 4,
        img: './img/18.png',
        small_img: './img/18.png',
        big_img: './img/18.png'
      },
      {
        id: 5,
        img: './img/19.png',
        small_img: './img/19.png',
        big_img: './img/19.png'
      }
    ]
  }
  
  const box = document.querySelector('.box')
  box.innerHTML = `
    <!-- 展示图片盒子 -->
    <div class="show">
      <img src="${ info.children[0].img }" alt="">
  
      <!-- 遮罩层盒子 -->
      <div class="mask"></div>
    </div>
  
    <!-- 切换列表盒子 -->
    <div class="list">
      <p class="active">
        <img
          src="${ info.children[0].small_img }"
          data-show="${ info.children[0].img }"
          data-enlarge="${ info.children[0].big_img }"
          alt="">
      </p>
      <p>
        <img
          src="${ info.children[1].small_img }"
          data-show="${ info.children[1].img }"
          data-enlarge="${ info.children[1].big_img }"
          alt="">
      </p>
      <p>
        <img
          src="${ info.children[2].small_img }"
          data-show="${ info.children[2].img }"
          data-enlarge="${ info.children[2].big_img }"
          alt="">
      </p>
      <p>
        <img
          src="${ info.children[3].small_img }"
          data-show="${ info.children[3].img }"
          data-enlarge="${ info.children[3].big_img }"
          alt="">
      </p>
      <p>
        <img
          src="${ info.children[4].small_img }"
          data-show="${ info.children[4].img }"
          data-enlarge="${ info.children[4].big_img }"
          alt="">
      </p>
  
      <!-- 放大镜盒子 -->
      <div class="enlarge" style="background-image: url(${ info.children[0].big_img })"></div>
    </div>
  `
  
  class Enlarge {
    constructor(select) {
      this.ele = document.querySelector(select)
      //  遮罩层
      this.mask = this.ele.querySelector('.mask')
      //  放大盒
      this.enlarge = this.ele.querySelector('.enlarge')
      //  列表盒
      this.list = this.ele.querySelector('.list')
      // 展示盒
      this.show = this.ele.querySelector('.show')
      //  show 盒尺寸
      this.show_width = this.show.clientWidth
      this.show_height = this.show.clientHeight
      //  mask 盒尺寸
      // 获取非行内样式
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
      // 7. 背景图片尺寸
      // 获取 backgroundSize 样式
      this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
      this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
  
      this.init()
    }
  
    // 原型上的方法
    // 0. 启动器
    init() {
      // 去调用所有的方法
      this.setScale()
      this.overOut()
      this.move()
      this.listChange()
    }
  
    setScale() {
      this.enlarge_width = this.mask_width * this.bg_width / this.show_width
      this.enlarge_height = this.mask_height * this.bg_height / this.show_height
  
      this.enlarge.style.width = this.enlarge_width + 'px'
      this.enlarge.style.height = this.enlarge_height + 'px'
    }
  
    
    overOut() {
      this.show.addEventListener('mouseover', () => {
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'
      })
  
      this.show.addEventListener('mouseout', () => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
      })
    }
  
    move() {
      this.show.addEventListener('mousemove', e => {
        e = e || window.event
        let x = e.offsetX - this.mask_width / 2
        let y = e.offsetY - this.mask_height / 2
        if (x <= 0) x = 0
        if (y <= 0) y = 0
        if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
        if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
        this.mask.style.left = x + 'px'
        this.mask.style.top = y + 'px'
        const bg_x = this.enlarge_width * x / this.mask_width
        const bg_y = this.enlarge_height * y / this.mask_height
        this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
      })
  
    }
  
    listChange() {
      this.list.addEventListener('click', e => {
        e = e || window.event
        const target = e.target || e.srcElement
        if (target.nodeName === 'IMG') {
          const showUrl = target.dataset.show
          const enlargeUrl = target.dataset.enlarge
          this.show.firstElementChild.src = showUrl
          this.enlarge.style.backgroundImage = `url(${ enlargeUrl })`
          for (let i = 0; i < this.list.children.length; i++) {
            this.list.children[i].classList.remove('active')
          }
          target.parentElement.classList.add('active')
        }
      })
    }
  }